import React, { Component } from 'react';
import { RouteComponentProps } from 'react-router';
import { withRouter } from 'react-router-dom';
import { connect } from 'react-redux';
import styles from './index.module.scss';
import {
	Table,
	Form,
	Button,
	Input,
	Select,
	Row,
	Col,
	Popconfirm,
	message,
} from 'antd';
import { taskList, clearRecord } from 'src/services/DataManage';
import { SearchOutlined } from '@ant-design/icons';
import { FormInstance } from 'antd/lib/form';

interface IProps {
	biRoleList: string; //当前用户角色
};
class ExecutionRecord extends Component<RouteComponentProps & IProps> {
	
	formRef = React.createRef<FormInstance>()
	
	state = {
		dataSource: [],
		page: 1,
		pageSize: 10,
		total: 1,
		tableLoading: false,
		hasLimit: false
	}
	
	columns = [
		{
			title: '模板名称',
			dataIndex: 'modelName',
			key: 'modelName',
		},
		{
			title: '任务名称',
			dataIndex: 'name',
			key: 'name',
		},
		{
			title: '执行状态',
			dataIndex: 'resultDesc',
			key: 'resultDesc',
		},
		{
			title: '任务类型',
			dataIndex: 'planTypeDesc',
			key: 'planTypeDesc',
		},
		{
			title: '执行描述',
			dataIndex: 'planStageDesc',
			key: 'planStageDesc',
		},
		{
			title: '上次执行时间',
			dataIndex: 'lastExecuteDate',
			key: 'lastExecuteDate',
		},
		{
			title: '计划执行时间',
			dataIndex: 'currExecuteDate',
			key: 'currExecuteDate',
		},
		{
			title: '下次执行时间',
			dataIndex: 'nextExecuteDate',
			key: 'nextExecuteDate',
		},
		{
			title: '实际执行时间',
			dataIndex: 'actualExecuteDate',
			key: 'actualExecuteDate',
		},
	]
	
	getList = async () => {
    	this.setState( { tableLoading: true } );
    	const { pageSize,page } = this.state;
    	
    	let data = { 'modelCode': '', 'modelName': '', 'page': page, 'planResult': '',
			'planStage': '', 'planType': '', 'resultDesc': '', 'size': pageSize };
    	if( this.state.hasLimit ) {
			let f = this.formRef.current.getFieldsValue();
    		data = { ...data,...f };
		}
		const info = await taskList( { data: data } );
		if ( info.data.success ) {
			this.setState( { dataSource: [ ...info.data.data.rows ], total: info.data.data.total } );
		}
		this.setState( {
			tableLoading: false
		} );
	}

	handlePageChange = ( pageNumber: number ) => {
		this.setState( {
			page: pageNumber
		}, () => {
			this.getList();
		} );
	}

	handleSearch = () => {
		this.setState( { hasLimit: true },
			() => {this.handlePageChange( 1 );} );
	}

	handleReset = () => {
		this.formRef.current.resetFields();
		this.setState( { hasLimit: false },
			() => {this.handlePageChange( 1 );} );
	}

	//清除记录
	clearRecord = async () => {
		const res = await clearRecord( {} );
		if ( res.data.success ) {
			message.success( '清除记录成功' );
			this.handlePageChange( 1 );
		}
	};
	
	componentDidMount(): void {
    	this.getList();
	}

	render() {
		return (
			<div className={styles.page}>
				<div className={styles.wrap}>
					<Row>
						<Col span={6}>
							{
								this.props.biRoleList.indexOf( 'superuser' ) > -1 && (
									<Popconfirm okText="确定" cancelText="取消" placement="bottom"
										title="是否确认清除31天前的所有执行记录？" 
										onConfirm={ this.clearRecord }>
										<Button>清除记录</Button>
									</Popconfirm>
								)
							}
						</Col>
						<Col span={18}>
							<Form ref={this.formRef}>
								<div className={styles.header}>
									<div className={styles.headerItem} >
										<Form.Item name={'name'} noStyle={true}><Input placeholder={'任务名称'} /></Form.Item>
									</div>
									<div className={styles.headerItem}>
										<Form.Item name={'modelName'} noStyle={true}><Input placeholder={'模板名称'} /></Form.Item>
									</div>
									<div className={styles.headerItem}>
										<Form.Item name={'planResult'} noStyle={true}>
											<Select placeholder="请选择任务状态" style={{ width: '180px' }}>
												<Select.Option value={'1'}>成功</Select.Option>
												<Select.Option value={'0'}>失败</Select.Option>
												<Select.Option value={'2'}>取消</Select.Option>
											</Select>
										</Form.Item>
									</div>
									<div className={styles.headerItem}>
										<Button icon={<SearchOutlined />} type='primary' onClick={this.handleSearch} >查询</Button>
									</div>
									<div style={{ marginLeft: '10px' }}>
										<Button type='primary' onClick={this.handleReset} >重置</Button>
									</div>
								</div>
							</Form>
						</Col>
					</Row>
					<Table columns={this.columns}
						dataSource={this.state.dataSource}
						loading={this.state.tableLoading}
						bordered
						rowKey={'code'}
						pagination={ {
							current: this.state.page,
							showSizeChanger: true,
							pageSize: this.state.pageSize,
							onChange: this.handlePageChange,
							total: this.state.total,
							onShowSizeChange: ( current, size ) => this.setState( { pageSize: size } ),
							showTotal: total => `共 ${total} 条`,
						} } />
				</div>
			</div>
		);
	}
}

//	映射state到当前组件
const mapStateToProps = ( state ) => {
	return {
		biRoleList: state.user.biRoleTypeList || '',
	};
};

export default connect(
	mapStateToProps,
)( withRouter( ExecutionRecord ) );